<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>稀土掘金</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
<script src="./js/index.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div id="nav">
    <div class="container">
    <a href="#">稀土掘金</a>
    <ul class="nav-more">
        <li style="color:#007fff ;" id="index">首页</li>
        <li>沸点</li>
        <li>课程</li>
        <li>直播</li>
        <li>活动</li>
        <li>竞赛</li>
        <li>商城</li>
        <li>APP</li>
        <li>插件</li>
        
    </ul>
    <form action="">
        <input type="search" placeholder="探索稀土掘金" class="search-input"><div style="line-height: 30px; float: right;"><img src="./img/icon/搜索.svg" style="width: 20px;" class="search-btn"></div>
    </form>

    <div id="center">创作者中心 >
        <div id="center-more">
            <ul id="center-header">
                <li>写文章</li>
                <li>发沸点</li>
                <li>写笔记</li>
                <li>写代码</li>
                <li>草稿箱</li>
            </ul>
            <div id="detail-more">
                <span style="float: left;">创作灵感</span>
                <span style="float: right; font-size: 14px;
               color: #86909c;">查看更多 > </span>
                <ul style="overflow: hidden;float: left; ">
                    <li><div>活动</div><span>小册上新 6 折特惠｜Netty 网络编程之道</span></li>
                    <li><div>活动</div><span>4月更文挑战，持续写作，加速成长｜掘金日新计划</span></li>
                    <li><div style="background-color: #eaf2ff; color: #007fff;">话题</div><span>#每日快讯#</span></li>
                </ul>
            </div>
        </div>
    </div>
   
    <div style="float: left; line-height: 35px;margin-left: 40px;">会员</div>
    <div>
        <button id="login-btn">登陆 | 注册</button>
<div id="login-avt">
    <img src="" alt="头像">
    <div id="avt-m">
        <div class="header">
            <div id="more-avator">
                <img src="" alt="头像">
            </div>
           <span class="username" >用户名</span>
        </div>
        <ul class="three" style="margin-top: 20px; border-bottom: 1px solid #ccc; overflow: hidden;">
            <li><span id="fl-count">0</span>
                <h4>关注</h4>
            </li>
            <li><span id="gd-count">0</span>
                <h4>赞过</h4></li>
            <li><span id="cl-count">0</span>
                <h4>收藏</h4></li>
        </ul>
        <ul class="more" style="overflow: hidden; margin-top: 10px; border-bottom: 1px solid #ccc; margin-bottom: 20px;">
            <li>我的主页</li>
            <li>成长福利</li>
            <li>闪念笔记</li>
            <li>会员中心</li>
            <li>课程中心</li>
            <li>我的优惠</li>
            <li>我的报名</li>
            <li>我的足迹</li>
        </ul>
        <div id="setting" class="btn-two" style="float: left; margin-left: 23px; ">我的设置</div>
        <div id="logout" class="btn-two" style="float: right; margin-right: 23px; ;">退出登录</div>
    </div>
</div>

    </div>
</div>



</div>
    

<!-- 版心内容 -->
<div class="wrapper banner" id="index-banner">
    <!-- 左侧栏-->
    <div id="l-sidebar"><ul>
        <li>关注</li>
        <li class="l-change">综合</li>
        <li>前端</li>
        <li>后端</li>
        <li>iOS</li>
        <li>Android</li>
        <li>人工智能</li>
        <li>开发工具</li>
        <li>代码人生</li>
        <li>阅读</li>
    </ul></div>

    <!-- 右侧栏 -->
    <div id="r-sidebar">
        <div class="one">
            <div style="float: left;">
                <span>下午好</span>
            <div class="one-p">点亮在社区的每一天</div></div>
        <div id="qiandao">去签到</div>
        </div>
        <div class="ad-img">
            <img src="./img/advertisement/2b578b6d8fcb46b3ab68babce69e7c66_tplv-k3u1fbpfcp-no-mark_480_400_0_0.webp" >
        </div>
        <div class="ad-img">
            <img src="./img/advertisement/6c119d15f0f141dcadd8bbd8d63ad16d_tplv-k3u1fbpfcp-no-mark_480_400_0_0.webp" >
        </div>
        <div class="ad-img">
            <img src="./img/advertisement/f6ca899fd0f041baacb4b3e68b6dd088_tplv-k3u1fbpfcp-no-mark_480_400_0_0.webp" >
        </div>
        <div class="ad-img">
            <img src="./img/advertisement/QQ截图20230413162421.png" >
        </div>
        <div class="r-sbmore" style="margin-top: 20px;background-color: #fff; border-radius: 4px;">
            <ul>
                <li>稀土掘金漫游指南</li>
                <li>掘金浏览器插件</li>
                <li>掘金翻译计划</li>
                <li>官方微博</li>
                <li>微信公众号</li>
            </ul>
        </div>
        <div>
            <ul class="more-list">
                <li>用户协议</li>
                <li>营业执照</li>
                <li>隐私政策</li>
                <li>关于我们</li>
            </ul>
            <ul class="more-list">
                <li>站点地图</li>
                <li>使用指南</li>
                <li>友情链接</li>
                <li>更多文章</li>
            </ul>
            <ul class="more-list">
                <li>举报邮箱： feedback@xitu.io</li>
                <li>座机电话： 010-83434395</li>
                <li>京ICP备18012699号-3 ©2023 稀土掘金</li>
            </ul>
        </div>
    </div>

    <!-- 中间内容主体 -->
    <!-- 综合 -->
    <div class="main" id="zonhe">
<div id="zh-header">
    <div class="three" style="padding-left: 0px;">
        <div class="title">
        <span style="float: left;">综合文章榜</span><span style="float: right; font-size: 12px; color: #acadae" >更多 ></span></div>
    <ul>
        <li>微前端知识梳理</li>
        <li>打造属于你自己的 Mac（Next.js+Nest.js TS全栈项目） </li>
        <li>为什么我放弃了有道云笔记，选择了 Obsidian</li>
    </ul>
</div>

<div class="three" style="border-left: 1px solid #dedfdf; border-right: 1px solid #dedfdf;">
    <div class="title">
    <span style="float: left;">精选专栏榜</span><span style="float: right;font-size: 12px; color: #acadae" >更多 ></span></div>
<ul>
    <li>ShowMeAI资讯日报 ⛽ 首席AI资讯收纳官</li>
    <li>🏆【分布式 | 微服务技术系列】技术研究院</li>
    <li>Java高频面试题</li>
</ul>
</div>

<div class="three">
    <div class="title">
    <span style="float: left;">推荐收藏集</span><span style="float: right;font-size: 12px; color: #acadae" >更多 ></span></div>
<ul>
    <li>2023大厂面试</li>
    <li>技术文档-前端</li>
    <li>前端八股文</li>
</ul>
</div>

    </div>

<div id="zh-detail">
<div class="header">
    <div style="color: #007fff;">推荐</div>
    <div>最新</div>
</div>
<div class="list" style=" background-color: #fff;">
    <ul>
        <li><div class="id">沸点小助手</div><div class="createtime">七天前</div>
        <h3>秋季卡发放中！</h3>
    <div class="summary">hello大家好杂货店哈酒发哈会计法哈吉开发十八大会计法三打哈飞机看哈受打击开发和阿达撒哒哒哒哒adasdasdasdasdadaaaaa哒哒哒哒哒哒哒哒</div>
    <div class="img"> <img src="./img/advertisement/2b578b6d8fcb46b3ab68babce69e7c66_tplv-k3u1fbpfcp-no-mark_480_400_0_0.webp" alt=""></div>
<div id="icon" style="width: 50%; overflow: hidden;">
    <div class="viewed"><img src="./img/icon/查看.svg" ><span>152</span></div>
    <div class="liked"><img src="./img/icon/点赞.svg" ><span>125</span></div>
    <div><img src="./img/icon/评论.svg"><span>112</span></div>
</div></li>


<li><div class="id">沸点小助手</div><div class="createtime">七天前</div>
    <h3>秋季卡发放中！</h3>
<div class="summary">hello大家好杂货店哈酒发哈会计法哈吉开发十八大会计法三打哈飞机看哈受打击开发和阿达撒哒哒哒哒adasdasdasdasdadaaaaa哒哒哒哒哒哒哒哒</div>
<div class="img"> <img src="./img/advertisement/2b578b6d8fcb46b3ab68babce69e7c66_tplv-k3u1fbpfcp-no-mark_480_400_0_0.webp" alt=""></div>
<div id="icon" style="width: 50%; overflow: hidden;">
<div class="viewed"><img src="./img/icon/查看.svg" ><span>152</span></div>
<div class="liked"><img src="./img/icon/点赞.svg" ><span>125</span></div>
<div><img src="./img/icon/评论.svg"><span>112</span></div>
</div></li>


    </ul>
</div>
</div>

</div>
</div>
<!-- 登陆页面 -->
<div id="login">
    <div id="header">
        <h3>登陆掘金畅享更多权益</h3>
        <img src="./img/icon/关闭.png" id="login-close" >
    </div>
<div id="login-contain">
    <h4 style="font-weight: 500;">验证码登陆</h4>
    <input type="text" id="login-number" placeholder="请输入邮箱/手机号（国际号码加区号）" style="   margin-top: 10px;">
    <input type="text" id="login-yz" placeholder="请输入密码" style="    margin-bottom: 8px;">
    <span id="get">忘记密码</span>
    <button id="login-btn2">登陆</button>
</div>
    </div>

    <!-- 个人资料 -->
    <div id="user-info" class="wrapper">
        <div class="header">
            <span id="user-return" style="cursor: pointer;"> < 返回个人主页</span>
        </div>
        <div class="container">
            <div class="left">
                <ul>
                    <li style="    background-color: #eaf2ff;color: #007fff;">个人资料</li>
                    <li>账号设置</li>
                    <li>消息设置</li>
                    <li>简历管理</li>
                    <li>屏蔽管理</li>
                    <li>标签管理</li>
                </ul>
            </div>
            <div class="right">
                <h2>个人资料</h2>
                <div class="info-left">
                <form action="">
                    <ul>
                        <li><span>昵称</span><input type="text" placeholder="填写你的用户名"></li>
                        <li><span>邮箱</span><input type="text" placeholder="填写你的邮箱"></li>
                        <li><span>个人介绍</span><input type="text" placeholder="填写职业技能、擅长的事情、喜欢的事情等" ></li>
                    </ul>
                </form>
                <button type="submit" id="info-btn">保存修改</button>
            </div>
            <div class="info-right">
                <div id="info-avator">
                    <img src="" >
                    <span id="avator-change">点击修改头像</span>
                </div>
<h3 style="font-size: 16px; text-align: center; margin-top: 10px;">我的头像</h3>

            </div>
            </div>
        </div>
    </div>

    <!-- 个人主页 -->
    <div id="user-major" >
<div class="header">
    <div id="major-avator">
        <img src="" alt="头像">
    </div>
    <div class="detail">
     <span class="username">Yunyu</span>
     <ul>
        <li>+ 你从事什么职业？</li>
        <li>+ 你的兴趣爱好？</li>
     </ul>
    </div>
    <div id="major-btn">
        编辑个人资料
    </div>
    <div class="get">获得徽章</div>
   
</div>
<div class="follow">
<ul>
    <li style="border-right: 1px solid #ccc;"><div class="title">关注了</div>
    <div id="count-1">0</div></li>
    <li><div class="title">关注者</div>
        <div id="count-2">1</div></li>
</ul>
</div>
<div class="container">
    <div class="menu">
        <ul>
            <li style="color: #007fff;">动态</li>
            <li>文章</li>
            <li>专栏</li>
            <li>沸点</li>
            <li>收藏集</li>
            <li>关注</li>
            <li>赞</li>
        </ul>
    </div>

    <div id="none">
        <span>这里什么都没有</span>
    </div>
</div>

    </div>

</body>
</html>